.gaming{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.select-custom-card-list{
  position: fixed;
  top:0;
  left: 0;
  background: darkred;
  width:100%;
  height:100%;
}
.table{
  display: flex;
  flex:3;
  flex-direction: column;
}
.table .res-cards{
  width: 100%;
  flex: 1;
  padding: 10px;
}
@media screen and (orientation:portrait) {
    /* Portrait styles */

}
@media screen and (orientation:landscape) {
    /* Landscape styles */
    .table{
      flex-direction: row;
    }
    .res-cards.cards-top{
      flex:4;
    }
    .res-cards.cards-mid{
      flex:6;
    }
    .res-cards.cards-btm{
      flex:6;
    }
}
.table .res-cards button{
  font-size: 1.5em;
}
.table .res-cards .card-list{
  background: #666;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  box-shadow: 2px 2px 5px #333;
}
.table .res-cards .card-list>*{
  flex: 1;
}
.submit{
  flex: 0.8;
  min-height: 10vh;
}
.submit button{
  font-size: 2em;
}
.my-card-list{
  display: flex;
  bottom: 0;
  width: 100%;
  flex:1;
  min-height: 25vh;
  background: rgb(0,117,117);
}
.card{
  /*width:100px;*/
  /*flex:1;*/
  overflow: hidden;
  flex:1;
}
.card.selected{
  position: relative;
  top:-2em;
}
.card.used .img{
  background: #999;
}
.card .img{
  display: block;
  max-width: 100%;
  max-height: 100%;
  min-width: 2em;
  height: 100%;
  margin:5px 3px;
  padding: 3px;
  font-size: 1.5em;
  text-align: left;
  background-color:#FFF;
  border-radius: 6px;
  box-shadow: -2px -2px 3px #333;
  cursor: pointer;
}
.card .img .symbol{
  font-size: 1.8em;
  color:inherit;
}
.tool-bar{
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  background: #929;
  min-height: 10vh;
}
.tool-bar .tool-item{
  flex:1;
  color:#FFF;
  font-size: 1.3em;
  cursor: pointer;
  padding: 0.2em;    
}
.tool-bar .tool-item:hover{
  background:rgba(0,0,0,0.3);
}
.tool-bar .tool-item:first-child::before{
  content:"";
}
.tool-bar .tool-item::before{
  content:"<";
}

/*end game*/
.card-list{
  display: flex;
}
.one-vs-one-list{
  display: flex;
}
.one-vs-one{
  flex:1;
  border: 2px solid red;
}